	{%include "topo_180plus.html"%}
	<div id="principal">
		<div id="meio">
			<div id="conteudo">
				{%include "header.html"%}
				<div id="box_perfil">
					<div class="barra_inf">
						<p class="titulo">Publicar um an&uacute;ncio gr&aacute;tis no classi18 &eacute; r&aacute;pido e f&aacute;cil</p>
					</div>
					<form enctype="multipart/form-data" action="/anuncia/" method="post"> {% csrf_token %}
					{{ form.non_field_errors }}
					<div id="box_anunciar" >
						<div class="linha_anunciar">
							<p>Categoria:</p>
							{{form.categoria}}{{form.categoria.errors}}
							{{form.subcategoria}}{{form.subcategoria.errors}}
							<script type="text/javascript">
							$("#id_categoria").click(function(){
								var categori = document.getElementById("id_categoria");
									$("#id_subcategoria").find('option').remove();
								$.ajax({
					                type: "GET",
					                url: "/get_subcategoria/",
					                dataType: "json",
					                success: function(retorno){
					                    $.each(retorno, function(i, item){
						                    if(item.fields['categoria'] == categori.selectedIndex+1){
						                        $("#id_subcategoria").append('<option value="'+item.pk+'">'+item.fields['nome']+'</option>');}
					                    });
					                }
					            });
						});
						</script>
						</div>
						<div class="linha_anunciar">
							<p>Tipo:</p>					
							{{form.tipo}}{{form.tipo.errors}}
						</div>
						<div class="linha_anunciar">
							<p>T&iacute;tulo:</p>					
							{{form.descricao}}{{form.descricao.errors}}
						</div>
						<div class="linha_anunciar">
							<p>Pre&ccedil;o:</p>					
							{{form.preco}}{{form.preco.errors}}
						</div>
						<div class="linha_anunciar">
							<p>Fotos:</p>
							{{form.foto}}{{form.foto.errors}}
							<!-- ul class="box_fotos_anuncio">
								<li class="linha_fotos">
									<div class="foto_anuncio">
										<button>X</button>
										<img src="imagens/foto_prd1.png"/>
									</div>
									<div class="foto_anuncio">
										<button>X</button>
										<img src="imagens/foto_prd1.png"/>
									</div>
									<div class="foto_anuncio">
										<button>X</button>
										<img src="imagens/foto_prd1.png"/>
									</div>
									<div class="foto_anuncio">
										<button>X</button>
										<img src="imagens/foto_prd1.png"/>
									</div>
									<div class="foto_anuncio last">
										<button>X</button>
										<img src="imagens/foto_prd1.png"/>
									</div>
								</li>
							</ul> -->
						</div>
						<div class="linha_anunciar">
							<p>V&iacute;deo:</p>					
							{{form.video}}{{form.video.errors}}
						</div>
						<div class="linha_anunciar">
							<p>Descri&ccedil;&atilde;o:</p>
							<div id="text_buttons">
								<ul class="box_text">
									<li>
										<div class="btn_text btn1">
											<a href="#">bold</a> 
										</div>
									</li>
									<li>
										<div class="btn_text btn2">
											<a href="#">it&aacute;lico</a> 
										</div>
									</li>
									<li>
										<div class="btn_text btn3">
											<a href="#">sublinhado</a> 
										</div>
									</li>
									<li class="limite">
										<div class="btn_text btn4">
											<a href="#">outro</a> 
										</div>
									</li>
									<li>
										<div class="btn_text btn5">
											<a href="#">voltar</a> 
										</div>
									</li>
									<li class="limite">
										<div class="btn_text btn6">
											<a href="#">avan&ccedil;ar</a> 
										</div>
									</li>
									<li>
										<div class="btn_text btn7">
											<a href="#">estilo1</a> 
										</div>
									</li>
									<li>
										<div class="btn_text btn8">
											<a href="#">estilo2</a> 
										</div>
									</li>
								</ul>
							</div>					
							<span class="txt_desc">{{form.detalhes}}{{form.detalhes.errors}}</span>
							<div id="text_bottom">				
							</div>					
						</div>
						<div class="linha_anunciar">
							<button class="btn_publicar">Publicar an&uacute;ncio!</button>
						</div>
					</div>
				</div>
				<div id="box_direita">
					<div class="aviso">
						<p class="title">IMPORTANTE</p>
						<p>Todos os an&uacute;ncios devem conter descri&ccedil;ao clara e espec&iacute;fica sobre o produto ou servi&ccedil;o oferecido, bem como suas condi&ccedil;&otilde;es e fun&ccedil;&otilde;es.</p>
						<p>An&uacute;ncios com conte&uacute;do pro&iacute;bido ser&atilde;o apagados</p>
					</div>
				</div>
			</div>
		</div>	
		<div id="publicidade">
			<div class="publicidade_link">
				{%for gigante in publicidadeGigante%}
				<a href="{{gigante.url}}" title="Publicidade 3" ><img src="{{MEDIA_URL}}{{gigante.thumbnail}}">Publicidade 3</a>
				{%endfor%}  
			</div>
		</div>
	</div>
	{%include "rodape_regioes.html"%}
</body>
</html>